<template>
	<view>
		<view class="box bg-fafafa solid-bottom" :style="'padding-top:'+StatusBar+'px;height:'+barHeight+'px;'">
			<view class="cu-bar bg-fafafa" :style="'min-height:'+(barHeight-StatusBar)+'px;height:'+(barHeight-StatusBar)+'px;'">
				<view @click="back">
					<view :style="'height:'+barHeight+'px;'" style="width:100upx;left:0;text-align:center;display: flex;align-items: center;justify-content: center;">
						<text class="icon2-back_light" style="font-size: 42upx;"></text>
					</view>
				</view>
				<view class="content">
					个人信息
				</view>
			</view>
		</view>
		<common-view :indicator="indicator"></common-view>
		<scroll-view class="page" scroll-y :style="'height:'+(winHeight-barHeight)+'px;'" style="background-color:#FAFBFD;">
			<view class="member-top">
				<view class="member-info">
					<view class="member-head">
						<cropper selWidth="660rpx" selHeight="660rpx" @upload="myUpload" :avatarSrc="imgurl" avatarStyle="width:80px;height:80px;"></cropper>
					</view>
					<view class="m_n_id member-name">点击修改头像</view>
				</view>
			</view>

			<view class="cu-list menu margin-top" v-if="userInfo">
				<view class="cu-item" style="padding-left:30upx;">
					<view class="content">
						<text class="text-baseColor text-bold">基本信息</text>
					</view>
				</view>
				<navigator class="cu-item arrow" :url="'../../pages1/user/setVal?title=账号&field=usercode&val='+userInfo.usercode"
				 hover-class="none">
					<view class="content">
						<text class="text-baseColor">账号</text>
					</view>
					<view class="action">
						<view v-if="userInfo.usercode" class="text-grey text-sm val">
							{{userInfo.usercode}}
						</view>
						<view v-else class="text-red text-sm val">
							未设置
						</view>
					</view>
				</navigator>
				<navigator class="cu-item arrow" :url="'../../pages1/user/setVal?title=昵称&field=username&val='+userInfo.username"
				 hover-class="none">
					<view class="content">
						<text class="text-baseColor">昵称</text>
					</view>
					<view class="action">
						<view v-if="userInfo.username" class="text-grey text-sm val">
							{{userInfo.username}}
						</view>
						<view v-else class="text-grey text-sm val">
							设置
						</view>
					</view>
				</navigator>
				<navigator class="cu-item arrow" :url="'../../pages1/user/setVal?title=姓名&field=realname&val='+userInfo.realname"
				 hover-class="none">
					<view class="content">
						<text class="text-baseColor">姓名</text>
					</view>
					<view class="action">
						<view v-if="userInfo.realname" class="text-grey text-sm val">
							{{userInfo.realname}}
						</view>
						<view v-else class="text-grey text-sm val">
							设置
						</view>
					</view>
				</navigator>
				<navigator class="cu-item arrow" :url="'../../pages1/user/setListVal?title=性别&field=sex&val='+userInfo.sex" hover-class="none">
					<view class="content">
						<text class="text-baseColor">性别</text>
					</view>
					<view class="action">
						<view v-if="userInfo.sex!=null&&userInfo.sex>-1" class="text-grey text-sm val">
							{{userInfo.sex=='1'?'男':'女'}}
						</view>
						<view v-else class="text-grey text-sm val">
							设置
						</view>
					</view>
				</navigator>
				<navigator class="cu-item arrow" :url="'../../pages1/user/setTextAreaVal?title=个性签名&field=sign&val='+userInfo.sign"
				 hover-class="none" style="padding:30upx 60upx 30upx 30upx;align-items:start;">
					<view class="content">
						<text class="text-baseColor">个性签名</text>
					</view>
					<view class="action" style="width: calc(100% - 200upx );">
						<view v-if="userInfo.sign" class="text-grey text-sm val">
							{{userInfo.sign}}
						</view>
						<view v-else class="text-red text-sm val">
							未设置
						</view>
					</view>
				</navigator>
			</view>
			<view class="cu-list menu" v-if="userInfo">
				<view class="cu-item" style="padding-left:30upx;">
					<view class="content">
						<text class="text-baseColor text-bold">联系方式</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-baseColor">手机</text>
					</view>
					<view class="action">
						<view v-if="userInfo.mobile" class="text-grey text-sm val">
							{{userInfo.mobile}}
						</view>
						<view v-else class="text-red text-sm val">
							未绑定
						</view>
					</view>
				</view>
				<navigator class="cu-item arrow" :url="'../../pages1/user/setVal?title=邮箱&field=email&val='+userInfo.email" hover-class="none">
					<view class="content">
						<text class="text-baseColor">邮箱</text>
					</view>
					<view class="action">
						<view v-if="userInfo.email" class="text-grey text-sm val">
							{{userInfo.email}}
						</view>
						<view v-else class="text-grey text-sm val">
							设置
						</view>
					</view>
				</navigator>
				<navigator class="cu-item arrow" :url="'../../pages1/user/setVal?title=QQ&field=qq&val='+userInfo.qq"
				 hover-class="none">
					<view class="content">
						<text class="text-baseColor">QQ</text>
					</view>
					<view class="action">
						<view v-if="userInfo.qq" class="text-grey text-sm val">
							{{userInfo.qq}}
						</view>
						<view v-else class="text-grey text-sm val">
							设置
						</view>
					</view>
				</navigator>
			</view>
			<view class="flex flex-direction padding">
				<button class="cu-btn bg-red margin-top margin-bottom lg round" @click="$util.toPage" data-url="edtPwd" style="font-size:28upx;">修改密码</button>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let me = null;

	import util from 'common/util.js';
	import userObj from 'model/userModel.js';
	import uploadFileObj from 'model/uploadFileModel.js';
	const env = require('../../components/ali-oos/config.js');
	export default {

		data() {
			return {
				indicator: 0,
				albumBigW: 0,
				albumMinW: 0,
				barHeight: 0,
				StatusBar: this.StatusBar,
				policy: '',
				signature: '',
				imgurl: ''
			};
		},
		onLoad() {
			me = this;
			this.albumMinW = (this.WindowWidth - uni.upx2px(120)) / 3;
			this.albumBigW = this.albumMinW * 2 + uni.upx2px(30);
			this.barHeight = this.CustomBar;
			this.imgurl = this.userInfo.avatar;// + "_200";
		},
		computed: {
			...mapState({
				userInfo: ({
					userModule
				}) => userModule.userInfo,
				winHeight: ({
					baseModule
				}) => baseModule.winHeight
			})
		},
		methods: {
			...mapMutations(['userModule/update']),
			avatarEvent() {
				uni.showActionSheet({
					itemList: ['查看大图', '重新上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							var piclist = [me.userInfo.avatar.replace('_200', '')];
							uni.previewImage({
								indicator: "default",
								urls: piclist
							});
						} else {
							me.uploadAvatar();
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			myUpload(rsp) {
				me.imgurl = rsp.path;
				console.log(me.imgurl);
				
				uni.showLoading({
					title: "正在上传头像"
				});
				
				var fileKey = env.uploadImageUrl + 'avatar/' + new Date().getTime() + Math.floor(Math.random() * 150) + util.getSuffix(me.imgurl);
				uploadFileObj.uploadFile(fileKey, me.imgurl).then(res => {
					var post_data = {
						avatar:env.fileHost +"/"+ fileKey,
						user_id:me.userInfo.user_id
					};
					return userObj.setVal(me, JSON.stringify(post_data));
				}).then(
					res => {
						return userObj.getUserInfo(me);
					}
				).then(
					res => {
						uni.hideLoading();
						uni.showToast({
							title: '头像上传成功',
							image: '../../static/successed.png',
							duration: 1000
						});
						me['userModule/update'](res);
						me.setuserInfo(me.userInfo);
					}
				).catch(err => {
					uni.showToast({
						title: err,
						image: '../../static/error.png',
						duration: 1000
					})
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
	.cu-bar.tabbar,
	.cu-tabbar-height {
		min-height: 120upx;
	}

	.member-top {
		background-color: #fff;
		background-size: cover;
		text-align: center;
		width: 100%;
		/* position: relative; */
		z-index: 1;
		padding: 1.5rem 0;
	}

	.member-top .member-head {
		background: #e7e7e7;
		margin: 0 auto;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
	}

	.member-top .member-head image {
		width: 80px;
		height: 80px;
	}

	.member-top .member-name {
		width: 100%;
		color: #888;
		margin: 5px 0 0 0;
		font-size: 0.65rem;
	}

	.cu-form-group .title {
		font-size: 25upx;
	}

	.cu-form-group input {
		font-size: 25upx;
		color: #888;
	}

	.cu-form-group picker {
		padding-right: 10px;
	}

	.cu-form-group picker .picker {
		font-size: 25upx;
		color: #888;
	}

	.cu-form-group picker::after {
		display: none;
	}

	.text-align-right {
		text-align: right;
	}

	.text-align-left {
		text-align: left;
	}

	.cu-form-group+.cu-form-group {
		border: none;
	}

	.cu-list.menu>.cu-item:first-child:after {
		left: 0;
	}

	.cu-list.menu>.cu-item:after {
		left: 40upx;
	}


	.val {
		display: flex;
		font-size: 28upx;
	}

	.cu-list.menu>.cu-item.arrow {
		padding-right: 60upx;
		padding-left: 45upx;
	}

	.album-item {
		border-radius: 10upx;
		position: relative;
		overflow: hidden;
	}

	.no-image {
		width: 100%;
		height: 100%;
		background: #C1C0C8;
	}

	.album-item .label {
		position: absolute;
		bottom: 10upx;
		right: 10upx;
		width: 40upx;
		height: 40upx;
		border-radius: 40upx;
		text-align: center;
		background: #fff;
	}

	.album .row2 {
		display: flex;
	}

	.album .row1 {
		display: flex;
	}

	.album .row1 .min {
		margin-left: 30upx;
	}

	.album .row2 {
		margin-top: 30upx;
	}

	.album .row2 .album-item {
		margin-left: 30upx;
	}

	.album-item image {
		width: 100%;
		height: 100%;
		background: #C1C0C8;
	}

	.album .row2 .album-item:first-child {
		margin-left: 0;
	}

	.album .row1 .album-item {
		margin-top: 30upx;
	}

	.album .row1 .album-item:first-child {
		margin-top: 0;
	}
</style>
